<template>
  <div>
    <el-header class="cephalosome">
      <el-container>
        <el-row :gutter="24" class="row">
          <el-col :span="24" :sm="8" :lg="6">
            <div class="logo">
              <el-link href="index.html">
                <img src="../images/logo.svg" alt="logo" class="img-fluid">
              </el-link>
            </div>
            <el-button type="text" @click="toggleOffcanvas" class="btn">
              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" stroke-width="1" />
              </svg>
            </el-button>
          </el-col>
          <el-col :span="24" :sm="16" :lg="10" class="col-lg-2">
            <el-row :gutter="24" class="row-search">
              <el-col :span="8" class="col-type">
                <el-select v-model="category" placeholder="所有类别"  class="type custom-select">
                  <el-option label="所有类别" value="all"></el-option>
                  <el-option label="杂货" value="groceries"></el-option>
                  <el-option label="饮料" value="drinks"></el-option>
                  <el-option label="巧克力" value="chocolates"></el-option>
                </el-select>
              </el-col>
              <el-col :span="13" :md="13">
                <el-form id="search-form" :model="searchForm" @submit.prevent="handleSearch">
                  <el-input v-model="searchForm.keyword" placeholder="搜索超过20,000种产品"></el-input>
                </el-form>
              </el-col>
              <el-col class="col-search-btn">
                <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 7-7a7 7 0 0 1-7 7Z"/>
                </svg>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" :lg="8" class="align-self-center">
            <el-menu mode="horizontal"  text-color="#000" >
              <el-menu-item index="1">
                <el-link href="index.html" class="f-size">主页</el-link>
              </el-menu-item>
              <el-submenu index="2">
                <template slot="title"><span class="f-size">页面</span></template>
                <el-menu-item index="2-12">
                  <router-link to="/login" class="el-link el-link--default">登录</router-link>
                </el-menu-item>
                <el-menu-item index="2-12">
                  <router-link to="/register" class="el-link el-link--default">注册</router-link>
                </el-menu-item>
                <el-menu-item index="2-2">
                  <router-link to="/shop" class="el-link el-link--default">商品</router-link>
                </el-menu-item>
                <el-menu-item index="2-4">
                  <router-link to="/cart" class="el-link el-link--default">购物车</router-link>
                </el-menu-item>
                <el-menu-item index="2-5">
                  <router-link to="/checkout" class="el-link el-link--default">结账</router-link>
                </el-menu-item>
                <el-menu-item index="2-6">
                  <router-link to="/blog" class="el-link el-link--default">博客</router-link>
                </el-menu-item>
                <el-menu-item index="2-1">
                  <router-link to="/contact" class="el-link el-link--default">联系我们</router-link>
                </el-menu-item>
                <el-menu-item index="2-12">
                  <router-link to="/singlePost" class="el-link el-link--default">反馈</router-link>
                </el-menu-item>
              </el-submenu>
              <el-menu-item index="3" style="color: green !important;" >
                <el-link href="#" target="_blank" class="f-size">按钮</el-link>
              </el-menu-item>            
            </el-menu>
          </el-col>
          <el-col :span="24" :sm="16" :lg="6" class="px-3">
            <ul class="inline-list">
              <li>
                <el-link href="#" class="p-2 mx-1">
                  <img src="../images/user.svg" alt="user">
                </el-link>
              </li>
              <li>
                <el-link href="#" class="p-2 mx-1">
                  <img src="../images/wishlist.svg" alt="wishlist">
                </el-link>
              </li>
              <li>
                <el-link href="#" class="p-2 mx-1" @click="toggleCartOffcanvas">
                  <img src="../images/shop.svg" alt="shop">
                </el-link>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-container>
    </el-header>
  </div>
</template>

<script>
export default {
  name: 'cephalosome',
  data() {
    return {
      category: '',
      searchForm: {
        keyword: ''
      }
    };
  },
  methods: {
    toggleOffcanvas() {
      // 实现侧边栏展开收起逻辑
    },
    toggleCartOffcanvas() {
      // 实现购物车侧边栏展开收起逻辑
    },
    handleSearch() {
      // 实现搜索逻辑
    }
  }
};
</script>

<style scoped>
.cephalosome{
  margin-bottom: 5px;
}
li{
 list-style-type: none;
}
.header {
  margin-bottom: 15px;
  width: 100%;
}

.row{
  width: 100%;
}

.logo {
  width: 60%;
  margin-left: -5px;
  margin-top: 12px;
}

.img-fluid {
  max-width: 100%; /* 图片最大宽度为其容器的宽度 */
  height: auto; /* 保持高度自适应 */
}

.btn {
  margin-left: 170px;
  margin-top: -48px;
  float: left;
}

.col-lg-2 {
    width: 40%;
    margin-left: -160px;
  }

.row-search {
  width: 80%;
  height: 55px;
  line-height: 50px;
  margin-top: 8px;
  background-color: rgba(200, 200, 200, 0.2);
  border-radius: 15px;
}

.col-search-btn{
  zoom: 1 !important;
  margin-top: -35px;
  /* position: relative; */
}

.col-search-btn svg{
  position: absolute;
  right: 25px;

}

.align-self-center{
  width: 20%;
}

.green-text {
  color: green;
}

.px-3{
  width: 15%;
  float: right;
  margin-top: 17px;
}


.f-size{
  font-size: 20px !important;
  font-weight: 700 !important;
  /* color: black; */
}

.inline-list li{
  margin-left: 15px;
  display: inline-block;
}

</style>